<template>
  <view class="report-detail-page">
    <!-- 标题栏 -->
    <view class="header">
      <view class="back-btn" @click="onBack">
        <text class="iconfont">&#xe600;</text>
      </view>
      <text class="title">白蚁上报</text>
    </view>

    <view class="detail-content">
      <view class="info-section">
        <!-- 所在小区 -->
        <view class="info-item">
          <text class="label">所在小区</text>
          <text class="value">{{ reportDetail.community }}</text>
        </view>
        <view class="divider"></view>
        <!-- 房屋地址 -->
        <view class="info-item">
          <text class="label">房屋地址</text>
          <text class="value">{{ reportDetail.address }}</text>
        </view>
        <view class="divider"></view>
        <!-- 问题描述 -->
        <view class="info-item description-item">
          <text class="label">问题描述</text>
          <text class="value">{{ reportDetail.description }}</text>
        </view>
      </view>

      <view class="media-section">
        <!-- 上传图片 -->
        <view class="media-title">上传图片</view>
        <view class="image-list">
          <view
            v-for="(image, index) in reportDetail.images"
            :key="index"
            class="image-item"
          >
            <image
              :src="image"
              mode="aspectFill"
              @click="previewImage(index)"
            ></image>
          </view>
        </view>

        <!-- 上传视频 -->
        <view class="media-title"
          >上传视频 <text class="media-size-limit">(大小限500M以内)</text></view
        >
        <view class="video-container" v-if="reportDetail.video">
          <!-- Video element to display first frame -->
          <video
            :src="reportDetail.video"
            :controls="false"
            :show-play-btn="false"
            :show-fullscreen-btn="false"
            style="width: 100%; height: 100%; object-fit: cover"
          ></video>
          <!-- Custom play button overlay to cover native UI and handle click -->
          <view class="play-button-overlay" @click="showVideoPopup">
            <view class="play-button-icon">
              <text class="iconfont">&#xe600;</text>
            </view>
          </view>
        </view>

        <!-- 视频弹窗 -->
        <uni-popup ref="videoPopup" type="center" :mask-click="false">
          <view class="video-popup">
            <view class="popup-header">
              <text class="popup-title">视频播放</text>
              <text class="close-btn" @click="closeVideoPopup">×</text>
            </view>
            <view class="popup-content">
              <video
                :src="reportDetail.video"
                controls
                :id="'popupVideo'"
                style="width: 100%; height: 100%"
              ></video>
            </view>
          </view>
        </uni-popup>
      </view>

      <view class="info-section">
        <view class="info-item">
          <text class="label">防治企业</text>
          <text class="value">{{ reportDetail.company }}</text>
        </view>
        <view class="divider"></view>
        <view class="info-item">
          <text class="label">预约时间</text>
          <text class="value">{{ reportDetail.appointmentTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reportDetail: {
        community: "鞍山二村",
        address: "10号楼1011",
        description: "最近一周白蚁情况严重",
        images: [
          "https://via.placeholder.com/150/FF0000/FFFFFF?text=Image+1",
          "https://via.placeholder.com/150/00FF00/FFFFFF?text=Image+2",
          "https://via.placeholder.com/150/0000FF/FFFFFF?text=Image+3",
          "https://via.placeholder.com/150/FFFF00/000000?text=Image+4",
          "https://via.placeholder.com/150/00FFFF/000000?text=Image+5",
        ],
        video: "https://www.w3schools.com/html/mov_bbb.mp4",
        company: "上海上昆杀虫科技有限公司",
        appointmentTime: "2025-11-12 14:00~16:00",
      },
    };
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.reportDetail.images,
        current: this.reportDetail.images[index],
        indicator: "number",
        loop: true,
      });
    },
    showVideoPopup() {
      this.$refs.videoPopup.open();
      this.$nextTick(() => {
        const videoContext = uni.createVideoContext("popupVideo");
        videoContext.play();
      });
    },
    closeVideoPopup() {
      const videoContext = uni.createVideoContext("popupVideo");
      videoContext.stop();
      this.$refs.videoPopup.close();
    },
  },
};
</script>

<style lang="scss">
.report-detail-page {
  min-height: 100vh;
  background: #f3f3fa;
  padding-top: 100rpx; // Adjust based on header height
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  .back-btn {
    position: absolute;
    left: 30rpx;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 40rpx;
    color: #222;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
  }
}

.detail-content {
  padding: 20rpx 30rpx;
}

.info-section {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333;

  .label {
    flex-shrink: 0;
    margin-right: 20rpx;
    color: #666;
  }

  .value {
    flex: 1;
    text-align: right;
  }
}

.description-item {
  flex-direction: column; /* Stack label and value */
  align-items: flex-start; /* Align items to the start */
  .label {
    margin-bottom: 10rpx;
    margin-right: 0;
  }
  .value {
    text-align: left; /* Align description text to the left */
    width: 100%;
    word-break: break-all; /* Break long words */
  }
}

.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 0 -30rpx; /* Extend divider to the edge of the info-section padding */
}

.media-section {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .media-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }
  .media-size-limit {
    font-size: 24rpx;
    font-weight: normal;
    color: #999;
    margin-left: 10rpx;
  }
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx; /* Space between images */
  margin-bottom: 20rpx; /* Space below image list */

  .image-item {
    width: calc((100% - 40rpx) / 3); /* Three images per row with gaps */
    height: 180rpx; /* Adjust height as needed */
    border-radius: 8rpx;
    overflow: hidden; /* Hide overflowing parts of the image */

    image {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Cover the container */
    }
  }
}

.video-container {
  width: 262rpx;
  height: 148rpx;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
  background-color: #000; /* Keep background for potential loading */

  /* Add video styles back */
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* z-index is not strictly needed here if overlay is on top */
  }
  ::v-deep .uni-video-cover {
    display: none !important;
  }

  .play-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
      0,
      0,
      0,
      0.5
    ); /* Semi-transparent dark overlay to hide native UI */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Ensure it's above the video */
    cursor: pointer; /* Add cursor pointer to the clickable overlay */
  }

  .play-button-icon {
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(
      255,
      255,
      255,
      0.8
    ); /* Slightly transparent white circle */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      font-size: 40rpx;
      color: #333; /* Darker icon color */
    }
  }
}

.video-popup {
  width: 600rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .close-btn {
      font-size: 40rpx;
      color: #999;
      padding: 0 10rpx;
      cursor: pointer;
    }
  }

  .popup-content {
    width: 100%;
    height: 400rpx;
    background-color: #000;
  }
}
</style>
